<template>
  <div class="education-container">
    <div class="eduEdit-min-box">
      <!-- 时间、学校名称、专业名称、学历 -->
      <div class="edu-header" @mouseenter="onMouseEnter" @mouseleave="onMouseLeave">
        <TitleC
          :attr1="education.time"
          :attr2="education.schoolName"
          :attr3="education.major"
          :attr4="education.degree"
          @attrUpdate="onEducationUpdate"
        ></TitleC>
        <div class="tool-box" v-if="toolBoxVisiable">
          <el-button
            circle
            icon="el-icon-remove-outline"
            size="mini"
            class="tool-item"
            @click="btnClick('delete')"
            :disabled="toolDisabled"
          ></el-button>
          <el-button
            circle
            icon="el-icon-circle-plus-outline"
            size="mini"
            class="tool-item"
            @click="btnClick('add')"
            :disabled="!toolDisabled"
          ></el-button>
        </div>
      </div>
      <div>
        <AutoTextArea
          :data="education.dec"
          v-if="education.dec"
          @textChange="onEduDecChange"
        ></AutoTextArea>
      </div>
    </div>
  </div>
</template>

<script>
import AutoTextArea from "@/components/base/AutoTextArea.vue";
import TitleB from "@/components/base/TitleB.vue";
import TitleC from "@/components/base/TitleC.vue";
export default {
  data() {
    return {
      education: {
        time: "",
        schoolName: "",
        major: "",
        degree: "",
        dec: ""
      },
      toolBoxVisiable: false,
      toolDisabled: true
    };
  },
  watch: {
    "education.dec"(newVal, oldVal) {
      if (newVal === "") this.toolDisabled = true;
      else this.toolDisabled = false;
    }
  },
  props: {
    eduItem: {}
  },
  methods: {

    // 修改教育经历的描述部分
    onEduDecChange(newDec) {
      this.education.dec = newDec
      this.updateEducationInfo()
    },
    // 修改教育经历的标题部分(时间、学校名称、专业、学历)
    onEducationUpdate({index,newVal}){
      switch (index) {
        case 1:
          this.education.time = newVal
          this.updateEducationInfo()
          break
        case 2:
          this.education.schoolName = newVal
          this.updateEducationInfo()
          break
        case 3:
          this.education.major = newVal
          this.updateEducationInfo()
          break
        case 4:
          this.education.degree= newVal
          this.updateEducationInfo()
          break
      }

    },
    // 鼠标移入显示工具栏
    onMouseEnter() {
      this.toolBoxVisiable = true;
    },
    // 鼠标移出隐藏工具栏
    onMouseLeave() {
      this.toolBoxVisiable = false;
    },
    btnClick(tag) {
      if (tag === "add") {
        this.education.dec = "我在学校学习一级棒";
      } else {
        this.education.dec = "";
      }
      this.updateEducationInfo();
    },
    // 通知父组件信息更新
    updateEducationInfo(){
      this.$emit('eduInfoUpdate',this.education)
    }
  },
  components: {
    AutoTextArea,
    TitleB,
    TitleC
  },
  created() {
    this.education = this.eduItem;
  }
};
</script>

<style scoped lang="less">
.education-container {
  width: 100%;
  padding: 0 15px;
}
.edu-header {
  position: relative;
}
.tool-box {
  position: absolute;
  bottom: 0;
  right: 0;
  width: 80px;
  height: 40px;
  // font-size: 30px;
  line-height: 40px;
  text-align: center;
}
.tool-item {
  border: none;
  padding: 0;
}
.el-button--mini {
  font-size: 20px;
}
</style>
